﻿<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <l-panel>
      <template #title>
        <div>{{ $t("采购订单") }}</div>
        <div style="width: 560px">
          <div class="ml-8" style="float: right">
            <l-tool-btns
              :hasTableSetting="true"
              @setting="lr_handleSettingTable"
              @click="handleAdd()"
            >
              <l-excel-btns></l-excel-btns>
            </l-tool-btns>
          </div>
          <div style="float: right">
            <el-input
              placeholder="输入内容"
              @keyup.enter.native="handleSearch"
              v-model="searchWord"
              size="mini"
            >
              <el-button
                @click="handleSearch"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </div>
        </div>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableData"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
        rowKey="f_Id"
        isMultiSelect
      >
        <template v-slot:f_InStoreState="scope">
          <i
            v-if="scope.row.f_InStoreState == 0"
            style="font-size: 20px"
            class="learun-icon-circle-correct-base learun-success"
          />
          <i
            v-else
            style="font-size: 20px"
            class="learun-icon-circle-sigh-base learun-error"
          />
        </template>
        <template v-slot:f_TicketState="scope">
          <i
            v-if="scope.row.f_TicketState == 0"
            style="font-size: 20px"
            class="learun-icon-circle-correct-base learun-success"
          />
          <i
            v-else
            style="font-size: 20px"
            class="learun-icon-circle-sigh-base learun-error"
          />
        </template>
        <template v-slot:f_PayState="scope">
          <i
            v-if="scope.row.f_PayState == 0"
            style="font-size: 20px"
            class="learun-icon-circle-correct-base learun-success"
          />
          <i
            v-else
            style="font-size: 20px"
            class="learun-icon-circle-sigh-base learun-error"
          />
        </template>
        <template v-slot:f_PurchaseSynopsis="scope">
          <el-popover
            placement="bottom-start"
            width="140"
            trigger="hover"
            v-if="scope.row.f_PurchaseSynopsis"
            popper-class="erpcase-purchase-popover"
          >
            <div slot="reference">
              {{ getSynopsis(scope.row.f_PurchaseSynopsis)
              }}<i class="el-icon-caret-bottom" />
            </div>
            <div class="popover-list">
              <div
                class="popover-list-item"
                :key="index"
                v-for="(item, index) in scope.row.f_PurchaseSynopsis.split(',')"
              >
                <p
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 120px;
                  "
                >
                  {{ item }}
                </p>
              </div>
            </div>
          </el-popover>
        </template>
        <l-table-btns
          :btns="tableBtns"
          @click="lr_handleTableBtnClick"
          :filterBtns="filterBtns"
        ></l-table-btns>
      </l-table>
    </l-panel>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="980"
      :width="1000"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <detail-form ref="detailForm" @refresh="wfSubmit" />
    </l-dialog>

    <!--流程创建-->
    <wf-create-form
      ref="wfcreate"
      code="erp-purchase"
      :type="formEdit ? 'draft' : ''"
      :params="{ processId: purchaseId }"
      :isLoadFormData="formEdit"
      :title="formEdit ? 'Edit订单' : 'Add订单'"
      wraperType="dialog"
      :height="980"
      :width="1000"
      :visible.sync="wfVisible"
      @refresh="loadTableData(true)"
    />
  </l-layout>
</template>

<script>
import DetailForm from "./detailForm";
const api = window.$api.erpcase.purchase;
const apiWF = window.$api.workflow.process;

export default {
  components: {
    DetailForm,
  },
  data() {
    return {
      lr_isPage: true,
      moduleCode: "ERP_PurchaseOrders",

      // query参数
      searchWord: "",

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "采购编码",
          prop: "f_Number",
          width: 160,
          isNotAutoWrap: true,
          align: "left",
        },
        {
          label: "采购订单名称",
          prop: "f_Theme",
          minWidth: 120,
          align: "left",
          isNotAutoWrap: true,
        },
        {
          label: "供应商",
          prop: "f_SupplierName",
          minWidth: 120,
          align: "left",
          dataType: "dataSource",
          dataCode: "ERP_Suppliers",
          valueKey: "f_id",
          labelKey: "f_name",
          isNotAutoWrap: true,
        },
        {
          label: "采购日期",
          prop: "f_PurchaseDate",
          width: 100,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd",
        },
        {
          label: "采购部门",
          prop: "f_PurchaseDep",
          width: 120,
          align: "left",
          dataType: "department",
        },
        {
          label: "采购人员",
          prop: "f_PurchasePerson",
          width: 100,
          align: "left",
          dataType: "user",
        },
        {
          label: "采购物品",
          prop: "f_PurchaseSynopsis",
          width: 120,
          align: "left",
          isNotAutoWrap: true,
        },
        {
          label: "总金额",
          prop: "f_AmountSum",
          width: 100,
          align: "left",
        },
        {
          label: "已付金额",
          prop: "f_AlreadyAmount",
          width: 100,
          align: "left",
        },
        {
          label: "已到票金额",
          prop: "f_AlreadyTicket",
          width: 100,
          align: "left",
        },
        {
          label: "审核状态",
          prop: "f_AuditState",
          width: 80,
          align: "left",
          dataType: "mydata",
          options: [
            { value: 1, label: "未提交" },
            { value: 2, label: "审批中" },
            { label: 3, value: "已驳回" },
            { label: 4, value: "通过" },
          ],
        },
        {
          label: "入库",
          prop: "f_InStoreState",
          width: 64,
          align: "center",
        },
        {
          label: "到票",
          prop: "f_TicketState",
          width: 64,
          align: "center",
        },
        {
          label: "付款",
          prop: "f_PayState",
          width: 64,
          align: "center",
        },
      ],
      tableBtns: [
        { prop: "Details", label: "查看",width:40 },
        { prop: "Edit", label: "Edit",width:40 },
        { prop: "Delete", label: "Delete",width:40 },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
      formDetails: false,

      // 流程创建
      wfVisible: false,
    };
  },
  computed: {
    purchaseId() {
      if (this.formEditRow) {
        return this.formEditRow.f_Id;
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },
    wfSubmit() {
      this.formVisible = false;
      this.loadTableData(true);
    },

    filterBtns(row, btns) {
      if (row.f_AuditState != 1) {
        btns[1].disabled = true;
        btns[2].disabled = true;
      } else {
        btns[0].disabled = true;
      }

      return btns;
    },
    getSynopsis(str) {
      const list = str.split(",");
      if (list.length == 1) {
        return `${list[0].split(":")[0]}`;
      }
      return `${list[0].split(":")[0]}等${list.length}项`;
    },

    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = {};

      queryData.f_Theme = this.searchWord;
      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_CreateDate DESC";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.wfVisible = true;
    },
    handleAdd() {
      this.formEdit = false;
      this.formEditRow = null;
      this.wfVisible = true;
    },

    handleDetails($index, row) {
      this.formEdit = true;
      this.formDetails = false;
      this.formEditRow = row;
      this.handleShowForm("查看订单Details");
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("This operation will permanently delete the data. Do you want to continue?"),
        this.$t("Tips"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          await apiWF.deleteDraft(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("Delete  success"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("Delete has been canceled!"),
          });
        });
    },
    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("Loading data...");
        await this.$refs.detailForm.loadFormData({
          keyValue: this.formEditRow.f_Id,
        });
        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.detailForm.resetForm();
    },
  },
};
</script>

<style lang="scss">
.erpcase-purchase-popover {
  padding: 0;
  .popover-list {
    max-height: 400;
    overflow: hidden auto;
    font-size: 14px;
    color: #333;
    line-height: 40px;
    padding-left: 10px;
  }
}
</style>